<template>
  <div id="tablebox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div style="overflow-y: auto;height: calc(100vh - 170px);">
      <p class="titlefoodTitle"><span>当前账号：<i class="name">{{ userInfo ? userInfo.realname : '---' }}</i>，班级人数：<i
          class="name">{{ student_count }}</i></span>
        <!--        , 累计预约人数：<i class="numberUse">{{ apply_count }}</i>-->
        <!--<span class="last-span"><span>当前学生ID：未读取到相应学生ID</span><el-button type="primary" @click="saveApplyId()"-->
        <!--size="small"-->
        <!--class="getTodayLine">确定保存</el-button></span>-->
        <!--        <span class="last-span"><span>当前学生ID：-->
        <!--          <el-input v-model="id_number" placeholder="学生ID" size="small" class="w-200"></el-input>-->
        <!--        </span>-->
        <el-button type="primary" @click="saveApplyId()" size="small" class="getTodayLine">保存预约</el-button>
        <!--          <el-button @click="saveApplyIdAllFn()" size="small" class="getTodayLine">一键全班预约</el-button>-->
        <!--        <el-button @click="checkStudent()" size="small" class="getTodayLine">选择学生</el-button>-->
        <!--        </span>-->
      </p>
      <div class="cornerinfo">
        <div class="cornerinfo-time mb-10" style="display: flex;align-items: center">
          选择参与日期：
          <el-date-picker
              v-model="value1"
              type="date"
              :picker-options="pickerOptions1"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="dataTimeFn"
          >
          </el-date-picker>
          <div class="ml-20">
            参与时段:
            <el-radio-group v-model="timeType">
              <el-radio label="1">上午</el-radio>
              <el-radio label="2">下午</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="cornerinfo-student">
          <div>
            当前已选学生：
            <el-button @click="checkStudent()" size="small" class="getTodayLine" style="margin-left:0;">选择学生（{{student.dynamicTags.length}}）</el-button>
          </div>
          <div class="mt-20">
            <el-tag
                :key="index"
                closable
                v-for="(tag,index) in student.dynamicTags"
                class="mr-10 tag-box"
                @close="handleClose(tag)"
            >{{ tag }}
            </el-tag>
          </div>
        </div>
        <div class="cornerinfo-student mt-20">
          班级可预约区角：共 {{showCommont.length}} 个
        </div>
      </div>
      <div class="commont-body-star" v-if="showCommont.length">
        <div class="commont-body-star-list-out" v-for="(item,index) in showCommont">
          <div class="commont-body-star-list" @click="getAreaBox(index)" :class="getId[index]?'showCheckBox':''"
               :style="{'cursor':item.surplus?'pointer':'not-allowed'}">
            <div class="foodimg-body"
                 :style="{backgroundImage:'url('+item.pic+')',backgroundSize:'cover',backgroundPosition:'center'}">
            </div>
            <p class="food-title-name">{{ item.name }}</p>
            <p class="food-title-number"><span>可参与人数：{{ item.number }}人</span></p>
            <p class="food-title-number"><span>当日剩余名额：{{ value1?item.surplus:'--' }}人</span></p>
          </div>
        </div>
      </div>
      <div class="cornerNothing" v-else>
        <div class="iconfont iconmeiyougengduo iconline"></div>
        <p class="iconlineTxt">没有相应的预约区域</p>
      </div>
    </div>
<!--    <cornerStudent :visible.sync="student.studentVisible" @studentFn="studentFn" :dynamicTagsArray="student.dynamicTagsArray"></cornerStudent>-->
      <MultipleStudentModle :visible.sync="student.studentVisible" @studentFn="studentFn" :dynamicTagsArray="student.dynamicTagsArray"></MultipleStudentModle>
    </div>
  </div>
</template>

<script>
// import cornerStudent from '@/components/dialog/cornerStudent.vue'
// import MultipleStudentModle from "../../components/modleTemplate/MultipleStudentModle";
import {mapGetters} from "vuex";
export default {
  components: {
    // cornerStudent
  },
  data () {
    return {
      userId: '',
      cartId: '',
      showCommont: [],
      oldData: [],
      showId: null,
      flag: true,
      realname: '',
      student_count: 0,
      apply_count: 0,
      getId: [],
      corner_id: [],
      id_number: '',
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() < Date.now()- 8.64e7 //减去就是不包含今天的 //  - 8.64e7 减去就是不包含今天的
        }
      },
      value1: '',
      timeType: '1',
      student: {
        studentVisible: false,
        teachertype: 0,
        dynamicTags: [],
        dynamicTagsId: [],
        dynamicTagsArray: {},
        user_ids: '',
        editBody: []
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created () {
    this.initFn()
  },
  methods: {
    initFn () {
      this.$post(this.api.admin_corner_apply_lists, { time: this.value1}).then((response) => {
        if (response.code === 0) {
          for (let i in response.list) {
            this.getId.push(false)
          }
          this.showCommont = response.list
          this.student_count = response.student_count
          this.apply_count = response.apply_count
          this.corner_id = []
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getAreaBox (index) {
      if (!this.value1) {
        this.$message.error('请选择预约时间')
        return
      }
      if(!this.student.dynamicTagsId.length){
        this.$message.error('选择需要预约的学生')
        return
      }
      // 需要判断是否已经满了
      if(this.student.dynamicTagsId.length>this.showCommont[index].surplus){
        this.$message.error('超过可预约人数')
        return
      }
      if(!this.showCommont[index].surplus){
        this.$message.error('当日可预约人数已满')
        return
      }
      // getId 数组 状态

      this.getStudentCorner(index)
    },
    // 获取班级预约区角人员
    async getStudentCorner(index) {
      let option_ = {
        type: this.timeType, // 上午下午
        start_time: this.value1,
        corner_id: this.showCommont[index].id,
      }
      let data = await this.$fetch(this.api.admin_class_apply_user, option_)
      console.log('预约的学生',this.student.dynamicTagsId)
      if(!data.code){
        let student_name = []
        for(let item of data.list){
          if(this.student.dynamicTagsId.indexOf(item.student_id)!==-1){
            student_name.push(item.student.name)
          }
        }
        if(student_name.length){
          let title = student_name.join(',')+' 已预约当天'+this.showCommont[index].name+'的区角！'
          this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }else{
          if (!this.getId[index]) {
            this.corner_id.push(this.showCommont[index].id)
          } else {
            this.corner_id.splice(this.corner_id.indexOf(this.showCommont[index].id), 1)
          }
          this.$set(this.getId, index, !this.getId[index])
        }
      }
      console.log(data)
    },
    // 一键全班预约
    saveApplyIdAllFn () {
      if (!this.corner_id.length) {
        this.$message.error('请选择需要预约申请的区角')
        return
      }
      console.log('学生信息', this.corner_id.join(','))
      // let a = 1
      // if (a) {
      //   return
      // }
      this.$post(this.api.corner.apply.batch, {
        id: this.corner_id.join(',')
      }).then((response) => {
        if (response.code === 0) {
          this.$message.success(response.msg)
          this.getId = []
          this.corner_id = []
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    saveApplyId () {
      if (!this.value1) {
        this.$message.error('选择预约时间')
        return
      }
      if (!this.student.dynamicTagsId.length) {
        this.$message.error('选择预约学生')
        return
      }
      if (!this.corner_id.length) {
        this.$message.error('请选择需要预约申请的区角')
        return
      }
      // 此处需要进行判断 选择的人数以及区角可预约的人数
      let studentNumber = this.student.dynamicTagsId.length
      for (let i in this.showCommont) {
        if (this.corner_id.indexOf(this.showCommont[i].id) !== -1) {
          console.log('这天的人数', this.showCommont[i].surplus)
          if (studentNumber > this.showCommont[i].surplus) {
            this.$message.error('预约学生超出当日剩余名额')
          }
        }
      }
      // console.log(this.student.dynamicTagsId,this.value1,this.corner_id)
      // let status = 1;
      // if(status){
      //   return
      // }
      this.$post(this.api.admin_corner_apply_add, {
        id_number: this.student.dynamicTagsId.join(','),
        time: this.value1,
        id: this.corner_id.join(','),
        type: this.timeType
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            message: '预约成功',
            type: 'success'
          })
          this.getId = []
          for (let i in this.showCommont) {
            this.getId.push(false)
          }
          this.value1 = ''
          this.id_number = ''
          this.corner_id = []
          this.student.dynamicTags = []
          this.student.dynamicTagsId = []
          this.student.dynamicTagsArray = {}
          // this.apply_count++
        } else {
          this.$confirm(response.msg, '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 选择预约的学生
    checkStudent () {
      this.student.studentVisible = true
    },
    // 收到学生信息
    studentFn (option) {
      console.log('收到数据内容：', option)
      this.student.dynamicTags = []
      this.student.dynamicTagsId = []
      this.student.dynamicTagsArray = {}
      for (let i in option) {
        this.student.dynamicTags.push(option[i].name)
        this.student.dynamicTagsId.push(option[i].id)
        this.student.dynamicTagsArray = option
      }
      this.student.user_ids = this.student.dynamicTagsId.join(',')
      for(let item in this.getId){
        this.$set(this.getId, item, false);
      }
    },
    // 删除标签
    handleClose (tag) {
      delete this.student.dynamicTagsArray[this.student.dynamicTagsId[this.student.dynamicTags.indexOf(tag)]]
      this.student.dynamicTags.splice(this.student.dynamicTags.indexOf(tag), 1)
      this.student.dynamicTagsId.splice(this.student.dynamicTags.indexOf(tag), 1)
      console.log(this.student.dynamicTagsArray)
      if(!this.student.dynamicTagsId.length){
        for(let item in this.getId){
          this.$set(this.getId, item, false);
        }
      }
      // this.getId
    },
    dataTimeFn () {
      console.log('时间变了', this.value1)
      this.getId = []
      this.initFn()
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.foodimg-body {
  width: 100%;
  height: 180px;
  border-bottom: 1px solid #eee;
}

.cornerinfo {
  padding-left: 30px;
}

.showCheckBox {
  //box-shadow: 0 0 24px rgba(255, 80, 193, 0.62);
  box-shadow: 0 0 24px rgba(0, 113, 156, 0.62);
  border: 4px solid #3e89ff !important;
}

.titlefoodTitle {
  display: flex;
  align-items: center;
}

.titlefoodTitle span {
  flex: 1;
}

.commont-body-star-list {
  //cursor: pointer;
  border:4px solid #fff;
}

.tag-box {
  margin-bottom: 5px;
}

.food-title-number {
  display: flex;
  padding: 10px;
  align-items: center;
  border-top: 1px solid #eee;
}

.food-title-number span:first-child {
  flex: 1;
}
</style>
